<template>
  <div>
    <div class="container">
      <h2 class="title">航空客运订票系统</h2>
      <div class="login-container">
        <form @submit.prevent="handleLogin">
          <div class="ac">
            <label for="account">账 &nbsp; 号</label>
            <input type="text" id="account" v-model="loginFormDTO.account" required />
          </div>
          <div class="ac">
            <label for="password">密 &nbsp; 码</label>
            <input type="password" id="password" v-model="loginFormDTO.password" required />
          </div>
          <div class="ac">
            &nbsp;&nbsp;
            <button type="submit" :disabled="isSubmitting" id="sub">登录</button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button type="reset" @click="loginFormDTO.account = ''; loginFormDTO.password = ''"
             id="reset">取消</button>
          </div>
          <div v-if="errorMessage" class="error-message">
            {{ errorMessage }}
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import {Login} from '@/api/index';
import { useRouter } from "vue-router"; // 导入 useRouter

//存储账号和密码
const loginFormDTO = reactive({
  account: '',
  password: ''
});

const isSubmitting = ref(false); //是否正在提交登录请求
const errorMessage = ref(''); //存储错误信息
const router = useRouter();

//处理登录的异步函数。它首先进行前端验证，然后发送登录请求，根据响应处理登录成功或失败的情况。
// 如果登录成功，会将token等信息存储到sessionStorage中，并跳转到订票页面。
const handleLogin = async () => {
  // 简单的前端校验
  if (!loginFormDTO.account.trim() || !loginFormDTO.password.trim()) {
    errorMessage.value = '用户名和密码不能为空';
    return;
  }

  isSubmitting.value = true;
  errorMessage.value = '';
  const response = await Login(loginFormDTO);

  if (response.data.success === false) {
    alert('登录失败', response.data.errorMsg)
    errorMessage.value = response.data.errorMsg
    isSubmitting.value = false
    return;
  }
  // 处理登录成功，例如跳转到主页
  console.log('登录成功', response);

  // console.log('localStorage:',window)

  // 需要存储一下token
  const token = response.data.data.token;
  if (token){
    sessionStorage.setItem('token', response.data.data.token)
    sessionStorage.setItem('userId', response.data.data.id)
    sessionStorage.setItem('clazz', response.data.data.clazz)
  }else{
    alert('token格式不规范');
    return;
  }

  // sessionStorage.setItem('token', response.data.token); // localStorage.setItem('token', response.data.token); 永久存储 除非用户自己删除
  //重定向到应用的主页或其他页面
  router.push("/booking");
}


</script>

<style>
.container {
  display: flex;
  flex-direction: column; /* 确保子元素垂直排列 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 100%;
  height: 100vh; /* 视口高度 */
  background-color: skyblue;
}

.title {
  font-size: 40px;
  font-weight: bolder;
  margin: 20px auto; /* 上下外边距 */
  text-align: center;
  color: #0b0a0a;
}

.login-container {
  width: 20%;
  height: 30%;
  padding: 40px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #ffffff;
}

.ac {
  margin-bottom: 10px;
  line-height: 70px;
}

input {
  height: 40px;
  width: 210px;
}
button {
  width: 100px;
  height: 40px;
}

#sub {
  background-color: #4c93af;
}

.error-message {
  color: red;
  margin-top: 10px;
}
</style>
